"use strict";
function SGoButton_elem()
{
    this.m_button=null;
    this.m_span=null;
    this.m_cfg=null;    
    
    this.init=function(parent,cfg,index)
    {
        var but;
        this.m_cfg=cfg;
        but=document.createElement('button');
        but.id=cfg.btype+"-"+index;
        but.className=cfg.btype;
        but.addEventListener("click",SGoUI_handleEvent);        
        this.m_button=but;        
        parent.appendChild(this.m_button);
        /* span */        
        this.m_span=document.createElement('span');
        this.m_button.appendChild(this.m_span);
               
    }
    
    this.changeLabel=function(type)
    {
        if(this.m_cfg.btype!=SGoButton.BUT_ID_AUTOPLAY)
        {
            if(type=="problem")
            {
                this.m_span.innerHTML=this.m_cfg.problem;
            }
            else if(type=="game")
            {
                this.m_span.innerHTML=this.m_cfg.game;
            }
        }
        else
        {
            if(type=="pause")
                this.m_span.innerHTML=this.m_cfg.pause;
            else
                this.m_span.innerHTML=this.m_cfg.play;
        }
    }
}

function SGoBox()
{
    
    this.m_variation=null;
    this.v_dim=0;
    this.m_index=0;
    this.m_config=null;    
    this.editable=false;
    /* 2 dim array, first for link second for link label */
    this.m_navButtons=new Array();

    this.init=function(parent,opt)
    {
        var top_div, cfg_but, spn,cfg_div;
        
        this.m_config=opt;
        this.m_index=opt.index;
        /*maindiv*/        
        this.m_maindiv=document.createElement('div');
        this.m_maindiv.id='sgo_main-'+opt.index;
        this.m_maindiv.className='sgo_main';
        parent.appendChild(this.m_maindiv);
        
        /* top_div: game_info + settings */
        top_div=document.createElement('div');
        top_div.className="sgo_top";        
        this.m_gameinfo=document.createElement('div');
        this.m_gameinfo.id='sgo_gameinfo-'+opt.index;
        this.m_gameinfo.className='sgo_gameinfo';                
        top_div.appendChild(this.m_gameinfo);                
        
        cfg_but=document.createElement('button');
        cfg_but.id=SGoButton.BUT_ID_CONFIG +"-" + opt.index;
        cfg_but.className=SGoButton.BUT_ID_CONFIG;
        spn=document.createElement('span');
        spn.innerHTML="\\";
        cfg_but.appendChild(spn);
        cfg_but.addEventListener("click",SGoUI_handleEvent);
        /*
        cfg_div=document.createElement('div');
        cfg_div.className="sgo_config_container";
        cfg_div.innerHTML="&#9881;";
        cfg_div.appendChild(cfg_but);        
        */
        top_div.appendChild(cfg_but);
        
        this.m_maindiv.appendChild(top_div);        
        
        /* drawarea container  */
        this.m_container=document.createElement('div');
        this.m_container.id='SGoContainer-'+opt.index;
        this.m_container.className='SGoContainer';
        this.m_maindiv.appendChild(this.m_container);
        /* drawarea */
        this.m_drawarea=document.createElement('canvas');
        this.m_drawarea.id='SGoDrawArea-'+opt.index;
        this.m_drawarea.className='SGoDrawArea';
        this.m_drawarea.innerHTML="Your browser has no support for canvas !";        
        this.m_container.appendChild(this.m_drawarea);
        /*navigation menu*/
        this.m_navmenu=document.createElement('div');
        this.m_navmenu.id='sgo_nav'+opt.index;
        this.m_navmenu.className='sgo_nav'
        this.m_maindiv.appendChild(this.m_navmenu);
        /*comment div */
        if(opt.commentpos=='bottom')
        {
            this.m_comment=document.createElement('div');
            this.m_comment.id='sgo_comment'+opt.index;
            this.m_comment.className='sgo_comment';
            this.m_maindiv.appendChild(this.m_comment);
        }
        this.addNavLinks(this.m_navmenu,opt.filetype);
        this.addVariations(opt.stonesize);
    }
    
    this.getParentWidth=function()
    {
        var width;
        
        width=this.m_maindiv.parentNode.offsetWidth;
        if(width < 240)  
        {
            width=screen.width;                
            console.log(width);
        }
        return width;
    }
    
    this.resize=function(w,h,vdim)
    {
        var i;
        this.m_maindiv.style.width = w+'px';
        if(this.m_gameinfo!=null)
        {
            //this.m_gameinfo.style.width=w+'px';
            //this.m_gameinfo.style.width="90%";
        }
        this.m_container.style.width = w+'px';
        this.m_container.style.height = h+'px';
        
        this.m_drawarea.width = w;
        this.m_drawarea.height = h;
        
        this.m_navmenu.style.width = w+'px';

        if(this.m_comment!=null)
        {
            this.m_drawarea.width=w;
        }
        for(i=0;i<this.m_variation.length;i++)
        {
            this.m_variation[i].style.width=vdim+'px';
            this.m_variation[i].style.height=vdim+'px';
            this.m_variation[i].style.lineHeight=vdim+'px';
        }
        this.m_vdim=vdim;
    }

    this.changeNavLinks=function(filetype)
    {
        var i;

        for(i=0;i<this.m_navButtons.length;i++)
        {
            if(this.m_navButtons[i].m_cfg.btype=="autoplay")
            {
                this.m_navButtons[i].changeLabel("play")
            }
            else
            {
                this.m_navButtons[i].changeLabel(filetype)
            }
        }
    }
    
    this.setEditable=function(ed)
    {
        if(this.editable==ed) 
            return;
            
        this.editable=ed;        
        if(ed==true)
            this.m_drawarea.addEventListener('click',SGoUI_handleEvent);
        else
            this.m_drawarea.removeEventListener('click',SGoUI_handleEvent);
    }
    
    this.changeLabel=function(butid,lbl)
    {
        var i,found;
        found=false;

        for(i=0;i<this.m_navButtons.length;i++)
        {
            if(this.m_navButtons[i].m_cfg.btype==butid)
            {
                found=true;
                break;
            }
        }
        if(found)
        {
            this.m_navButtons[i].changeLabel(lbl);
        }
    }

    this.addNavLinks=function(parent,filetype)
    {
        var i,butlist,but,spn,navul,navli;

        if(filetype==undefined)
        {
            console.warn("invalid filetype for this menu");
            filetype='game';
        }
        butlist=SGoButton.getButtonList();
        
        navul=document.createElement('ul');
        navul.className='sgo_menu';
        navul.style.margin="0px"
        parent.appendChild(navul);

        for(i=0;i<butlist.length;i++)
        {

            navli=document.createElement('li');
            navul.appendChild(navli);
            but=new SGoButton_elem();
            but.init(navli,butlist[i],this.m_index);
            this.m_navButtons.push(but);
        }        
    }

    this.addComment=function(comment)
    {
        if(this.m_comment!=null)
        {
            this.m_comment.innerHTML=comment;
        }
    }

    this.setCommentPos=function(commentpos)
    {
        if(this.m_comment!=null)
        {
            if(commentpos=='none')
                this.m_comment.style.display='none';
            else
                this.m_comment.style.display='';
        }
    }

    this.setGameInfo=function(gameinfo)
    {
        if(this.m_gameinfo!=null)
        {
            this.m_gameinfo.innerHTML=gameinfo;
        }
    }

    this.addVariations=function(ssize)
    {
        var i,v;

        if(this.m_variation==null)
        {
            this.m_variation=new Array(SGFProp.MAX_CHILDREN);
            for(i=0;i<this.m_variation.length;i++)
            {
                v=document.createElement('div');
                v.id=SGoButton.BUT_ID_VARIATION+"-"+this.m_index+"-"+i
                v.className='SGoVar';                                          
                this.m_container.appendChild(v);
                v.addEventListener("click",SGoUI_handleEvent);
                this.m_variation[i]=v;
            }
         }
    }

    this.hideVariations=function()
    {
        var i;
        for(i=0;i<this.m_variation.length;i++)
        {
            this.m_variation[i].style.display='none';
        }
    }

    this.showVariations=function(vindex,x,y,show_var)
    {
        var x1, y1;
        x1=this.m_vdim/2+this.m_vdim*x;
        y1=this.m_vdim/2+this.m_vdim*y;
        
        this.m_variation[vindex].style.display='';
        this.m_variation[vindex].style.left=x1+'px';
        this.m_variation[vindex].style.top=y1+'px';
        if(show_var)
            this.m_variation[vindex].innerHTML=vindex+1;
        else
            this.m_variation[vindex].innerHTML='';
    }

}
